<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" class="loginHtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; Charset=utf-8" />
		<meta http-equiv="Content-Language" content="zh-CN" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<title>WhiteCat</title>
		<link rel="shortcut icon" th:href="@{images/logo.png}" type="image/x-icon" />
		<link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
		<link th:href="@{/font-awesome/css/font-awesome.min.css}" rel="stylesheet" />
		<link th:href="@{/css/global.css}" rel="stylesheet" />
		<link th:href="@{/css/animate.min.css}" rel="stylesheet" />
		<link th:href="@{/css/index.css}" rel="stylesheet" />
		<link th:href="@{/css/blog.css}" rel="stylesheet" />
		<link th:href="@{/css/me.css}" rel="stylesheet" />
	</head>

	<body>
		<div th:insert="~{front/commons/commons.html :: top}"></div>

		<div class="blog-user"></div>

		<div class="blog-body">
			<!--轮播-->
			<div class="layui-carousel blog-bg" id="carousel" lay-anim="default" lay-indicator="inside" lay-arrow="always" style="width: 1170px; height: 360px;">
				<div carousel-item="">
					<div class="layui-this">
						<a href="" target="_blank" title="bilibili">
							<img th:src="@{/images/topicPicture/de.jpg}">
						</a>
					</div>
					<div class="">
						<a href="" target="_blank" title="bilibili">
							<img th:src="@{/images/topicPicture/2.jpg}">
						</a>
					</div>
				</div>
			</div>
			<div class="blog-container">
				<div class="blog-main">
					<!--公告-->
					<div class="home-tips shadow">
						<i style="float:left;line-height:17px;" class="fa fa-volume-up"></i>
						<div class="home-tips-container">
							<span style="color: rgb(0, 150, 136); cursor: pointer; display: none;"><p><span>如果出现404或500的bug可以点击导航栏上的“联系我”发送相关消息哦~</span></p></span>
							<span style="color: rgb(0, 150, 136); cursor: pointer; display: block;"><p><span th:text="累计有123个IP访问过此网站">当前暂无人访问</span></p></span>
						</div>
					</div>

					<div class="blog-main-left animated slideInLeft">
						<!--帖子-->
                        <div class="flow-default" id="articleList">
                            <div class="article shadow animated zoomIn" th:each="article:${ArticleList.records}">
                                <!--文章图片简介-->
                                <div class="article-left">
                                    <img th:src="@{/common/download/topicPicture/} + ${article.titlePicture}" th:alt="网络丢失">
                                </div>
                                <!--文章类型和标题-->
                                <div class="article-right">
                                    <div class="article-title">
                                        <span class="article_is_top" th:if="${article.isOrigin == 0}">原创</span>&nbsp;
                                        <span class="article_is_yc" th:if="${article.isOrigin == 1}">搬运</span>&nbsp;
                                        <a th:href="@{/article/detail/} + ${article.id}" th:text="${article.title}"></a>
                                    </div>
                                    <!--展示文章简介，30个字符-->
                                    <div class="article-abstract">
                                        <a th:href="@{/article/detail/} + ${article.id}" th:text="${article.content.substring(0,30)}"></a>
                                    </div>
                                </div>
                                <div class="clear"></div>
                                <div class="article-footer">
                                    <span><i class="fa fa-clock-o" th:text="${article.publicTime}"></i>&nbsp;&nbsp;</span>
                                    <a th:href="@{/user/detailToOther/article/} + ${article.user.id}" class="article-author" th:text="${article.getUser().getUsername()}"><i class="fa fa-user"></i>&nbsp;&nbsp;</a>
                                    <span><i class="fa fa-tag"></i>&nbsp;&nbsp;<a th:text="${article.tag.tagname}"></a></span>
                                    <button th:onclick="support([[${article.id}]])" class="article-viewinfo" style="border-style:none; background-color: white" th:if="${article.isSupport==0}">
                                        <span class="article-viewinfo"> <i class="fa fa-thumbs-o-up"  style="color: cornflowerblue" th:text=" ${article.supportCount}" ></i>&nbsp;</span>
                                    </button>
                                    <button th:onclick="support([[${article.id}]])" class="article-viewinfo" style="border-style:none; background-color: white" th:if="${article.isSupport==1}">
                                        <span class="article-viewinfo"> <i class="fa fa-thumbs-o-up"  style="color: deeppink" th:text=" ${article.supportCount}"></i>&nbsp;</span>
                                    </button>
                                    <span class="article-viewinfo"><i class="fa fa-eye" th:text="${article.visitorVolume}"></i>&nbsp;</span>
                                    <span class="article-viewinfo"><i class="fa fa-commenting" th:text="${article.commentCount}"></i>&nbsp;</span>
                                </div>
                            </div>
                            <!--分页-->
                            <div class="layui-flow-more " style="background: white">
                                <div class="page">
                                    <div>
                                        <!--                    当前页是第一页时，不能使用上一页-->
                                        <a class="prev" th:href="@{http://localhost:8080/user/index/}+${ArticleList.current-1}" th:if="${ArticleList.current-1}>0">上一页</a>
                                        <span class="current" style="color: mediumseagreen" th:text="${ArticleList.current}"></span>
                                        <!--                    当前页是最后一页时，不能使用下一页-->
                                        <a class="next" th:href="@{http://localhost:8080/user/index/}+${ArticleList.current+1}" th:if="${ArticleList.current}!=${ArticleList.pages}">下一页</a>
                                        <a class="num" href="" th:text="共 + ${ArticleList.pages} + 页"></a>
                                        <div class="layui-inline layui-show-xs-block">
                                            <input type="text" id="pageCount" onkeyup="value=value.replace(/[^\d]/g,'')" onblur="value=value.replace(/[^\d]/g,'')" placeholder="页数" autocomplete="off" class="layui-input" style="width: 50px">
                                        </div>
                                        <div class="layui-inline layui-show-xs-block">
                                            <button class="layui-btn" onclick="toWhichPage()"><i class="layui-icon">&#xe615;</i></button>
                                        </div>
                                        <a class="num" th:text="共 + ${ArticleList.total} + 条"></a>
                                    </div>
                                </div>
                            </div>
                        </div>
					</div>

					<div class="blog-main-right">
						<div class="layui-tab layui-tab-brief shadow animated fadeInRight" lay-filter="docDemoTabBrief">
							<ul class="layui-tab-title">
								<li class="layui-this">点击排行</li>
								<li>最新发布</li>
							</ul>
							<div class="layui-tab-content">
								<div class="layui-tab-item layui-show">
									<ul class="blog-module-ul"  th:each="volume:${volumeList}">
										<li>
											<span>
												<i class="layui-badge-rim " ></i>
											</span> &nbsp;&nbsp;
											<a th:href="@{/article/detail/} + ${volume.id}" th:text="${volume.title}"></a>
										</li>
									</ul>
								</div>
								<div class="layui-tab-item">
									<ul class="blog-module-ul" th:each="time:${timeList}">
										<li>
											&nbsp;
											<span class="article_is_yc" th:if="${time.isOrigin == 0}">原创</span>
											<span class="article_is_yc" th:if="${time.isOrigin == 1}">搬运</span>
											<a th:href="@{/article/detail/} + ${time.id}" th:text="${time.title}"></a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<!--页脚-->
		<div th:insert="~{front/commons/commons.html :: down}"></div>

		<div class="blog-mask animated layui-hide"></div>

		<script th:src="@{/js/jquery.min.js}"></script>
		<script th:src="@{/layui/layui.js}"></script>
		<script th:src="@{/js/global.js}"></script>
		<script th:src="@{/js/index.js}"></script>
		<script th:inline="javascript">
                function support(articleId){
                $.get({
                    url: "/article/support/article/" + articleId,
                    success: function (data){
                        if (data === "error"){
                            layer.msg("请先登录！")
                        } else {
                            console.log(data)
                            location.href = "/user/index/" + [[${ArticleList.current}]];
                        }
                    },
                    error: function (){
                        alert("失败")
                    }
                })
            }
			window.onbeforeunload = function () {
				var scrollPos;
				if (typeof window.pageYOffset != 'undefined') {
					scrollPos = window.pageYOffset;
				}
				else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
					scrollPos = document.documentElement.scrollTop;
				}
				else if (typeof document.body != 'undefined') {
					scrollPos = document.body.scrollTop;
				}
				document.cookie = "scrollTop=" + scrollPos; //存储滚动条位置到cookies中
			}

			window.onload = function () {
				if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
					var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不为空，则读取滚动条位置
					document.documentElement.scrollTop = parseInt(arr[1]);
					document.body.scrollTop = parseInt(arr[1]);
				}
			}
		</script>
	</body>

</html>